<template>
	<view class="container">
		<view class="dot" v-if="isShow">
			<image class="work04" src="/static/work/04.png" mode=""></image>
		</view>
		<!-- <view style="width: 100%;height: 20rpx;"></view> -->

		<!-- <scroll-view :scroll-top="scrollTop" scroll-y="true" class="scroll-Y" @scrolltolower="lower">
				<view v-if="list.length>0" class="conter" v-for="(item,index) in list" :key="index">
					<view class="C-ORDER">
						<image style="width: 26rpx;height: 32rpx;" src="/static/work/sy_dd.png" mode=""></image>
						<view style="margin-left: 20rpx;">{{item.no}}</view>
					</view>
					<view class="C-ADDRESS">{{item.addressArea}}{{item.addressDetail}}</view>
					<view style="color: #999999;">预计送达时间:{{item.expectTime}}</view>
					<view class="r-b">
						<view class="ri-b-1" v-for="(item1,index1) in setArr(item.boxMap)" :key="index1">
							<view>{{item1[0]}}*{{item1[1]}}</view>
						</view>
					</view>
					
					<view class="C-MOBILE">
						<view class="MOBILE">联系人: {{item.addressName}}</view>
						<view>联系电话: {{item.addressMobile}}</view>
					</view>
					<view class="C-B" v-if="list.length>1">
						<u-button type="primary" :loading='loading' :custom-style="customStyleBtn1"
							@click="submit(item)">确认装车</u-button>
					</view>
				</view>
				<view class="node" v-if="list.length==0">
					暂无信息
				</view>
			</scroll-view> -->
	</view>
</template>

<script>
	import NFC from './NFC.js'
	import {
		scanNfc,
		updateNfcStatus,
		reversePosition
	} from '@/api/store.js'
	export default {
		data() {
			return {
				scrollTop: 0,
				loading: false,
				customStyleBtn1: {
					width: '200rpx',
					height: '60rpx',
					// borderRadius: '30rpx',
					// background: "linear-gradient(0deg, #177A77, #4B9C6D)",
					fontSize: '28rpx',
					fontWeight: 400,
					color: '#ffffff',
					border: 'none'
				},
				list: [],
				isShow:false,
			}
		},
		onLoad() {
			this.handleCustomEventBind = this.handleCustomEvent.bind(this);
			uni.$on('nfcCodds', this.handleCustomEventBind);
			NFC.listenNFCStatus()
			this.getRead()
		},
		methods: {
			// 确认装车
			submit(item) {
				uni.showModal({
					title: '提示',
					content: '是否确认装车？',
					success: async res => {
						if (res.confirm) {
							let res = await updateNfcStatus(item.id)
							uni.showToast({
								title: '操作成功',
								icon: 'none',
							})
							this.list = []
							setTimeout(() => {
								this.getRead()
							}, 2000)
						}
					}
				});
			},
			// 上拉加载
			lower() {},
			// 读NFC
			getRead() {
				// this.handleCustomEvent()
				NFC.readData();
				// uni.showLoading({
				// 	title: 'NFC读取中...'
				// })
				this.isShow = true
			},
			// NFC读取到的数据
			async handleCustomEvent(event) {
				uni.hideLoading()
				let id = event.data
				let res = await reversePosition({
					boxId: id,
					type: 0
				})
				console.log('接口返回数据:',res);
				this.isShow = false
				uni.showToast({
					title:'操作成功',
					icon:'none'
				})
				setTimeout(() => {
					this.getRead()
				}, 2000)
			},
			// 对象转数组
			setArr(obj) {
				let arr = [];
				for (let key in obj) {
					if (obj.hasOwnProperty(key)) {
						arr.push([key, obj[key]]);
					}
				}
				return arr
			},
		},
		onUnload() {
			// NFC.nfcRuning()
			// uni.hideLoading()
			uni.$off('customEvent')
			// this.isShow = false
		}
	}
</script>

<style scoped>
	.work04{
		width: 100rpx;
		height: 100rpx;
		position: relative;
		margin-top: 12%;
		margin-left: 10%;
	}
	.dot {
		width: 70px;
		height: 70px;
		display: block;
		position: absolute;
		border-radius: 50%;
		background-color: #FFFFFF;
		margin-top: -150rpx;
		margin-right: 0rpx;
		z-index: 1;
	}
	
	.dot::after {
		width: 100%;
		height: 100%;
		content: "";
		border-radius: 50%;
		position: absolute;
		top: 0;
		left: 0;
		z-index: -2;
		background-color: #177A77;
		animation: dot-play 4s linear 400ms infinite;
	}
	
	.dot::before {
		width: 100%;
		height: 100%;
		content: "";
		border-radius: 50%;
		position: absolute;
		top: 0;
		left: 0;
		z-index: -1;
		background-color: #DDECEB;
		animation: dot-play 4s linear 200ms infinite;
		animation-delay: 2s;
		/* 延迟 2s */
	}
	
	@keyframes dot-play {
		from {
			transform: scale(1);
			opacity: .2;
		}
	
		to {
			transform: scale(4);
			opacity: 0;
		}
	}
	.node {
		width: 100%;
		height: 100rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 24rpx;
		color: #999999;
	}

	.r-b {
		width: 100%;
		display: flex;
		align-items: center;
		flex-wrap: wrap;
	}

	.ri-b-1 {
		min-width: 30rpx;
		height: 40rpx;
		border-radius: 4rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 21rpx;
		color: #177A77;
		margin-right: 10rpx;
		background: #E7F1F1;
		padding: 0 10rpx;
		/* opacity: 0.1; */
	}

	.scroll-Y {
		width: 700rpx;
		height: calc(100vh - 50rpx);
	}

	.GDS {
		margin-top: 25rpx;
		width: 100%;
		display: flex;
		align-items: center;
	}

	.MOBILE {
		width: 250rpx;
		display: flex;
		align-items: center;
	}

	.C-MOBILE {
		width: 100%;
		height: 80rpx;
		display: flex;
		align-items: center;
		/* border-bottom: 1rpx solid #e6e6e6; */
		font-size: 26rpx;
	}

	.C-ADDRESS {
		height: 80rpx;
		font-size: 26rpx;
		color: #333333;
		display: flex;
		align-items: center;
	}

	.C-ORDER {
		width: 100%;
		height: 90rpx;
		font-size: 26rpx;
		color: #333333;
		display: flex;
		align-items: center;
		border-bottom: 1rpx solid #E6E6E6;
	}

	.C-B {
		width: 100%;
		height: 100rpx;
		display: flex;
		align-items: center;
		justify-content: flex-end;
	}

	.conter {
		width: 700rpx;
		min-height: 300rpx;
		display: flex;
		flex-direction: column;
		padding: 0 20rpx;
		box-sizing: border-box;
		margin-bottom: 20rpx;
		background-color: #FFFFFF;
		font-size: 24rpx;
		border-radius: 15rpx;
		/* margin: 0 auto; */
	}

	.container {
		width: 100%;
		height: 100vh;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		background-color: #FFFFFF;
	}
</style>